<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { SchemaForm } from '@/components/core/schema-form';
import { ElSwitch, ElSelect, ElSegmented } from 'element-plus';
import { AOptions } from '@/components/basic/select';
import { formItems, levelOptions } from './table-data';
import { TableController } from '@/components/core/dynamic-table';
import { DefaultService as Api } from '@/servers';
import { message } from '@/components/basic/message';

defineOptions({
  name: 'SiteManage'
});

const loading = ref(false);
const active = ref('');
const formItemProps = ref(formItems);
const options = ref<string[]>([]);

type SiteItemType = {
  icp: string;
  email: string;
  model: string;
  title: string;
  status: string;
  keyword: string;
  webType: string;
  description: string;
  host: string;
  appKey: string;
  apiName: string;
};

const form = ref<Partial<SiteItemType>>({});
const list = ref<
  {
    id: number;
    name: string;
    data: Partial<SiteItemType>;
    created_at: string;
  }[]
>([]);

const queryData = () => {
  Api.getSystemSiteList().then(({ data }) => {
    list.value = data.list;
    createOptions();
    loading.value = false;
  });
};

const changeFormModel = (val: string) => {
  if (!val) return;
  active.value = val;
  const index = options.value.findIndex(item => item === val);

  const propsRange = Object.keys(list.value[index].data);
  formItemProps.value = formItems.filter(i => propsRange.includes(i.prop));
  form.value = list.value[index].data;
};

const createOptions = () => {
  options.value = list.value.map(item => item.name);
  changeFormModel(options.value[0]);
};

onMounted(() => {
  loading.value = true;
  queryData();
});

const submitEdit = () => {
  if (!active.value) return;
  const formData = list.value.find(item => item.name === active.value);
  const { id, name, data } = formData!;
  Api.postSystemSiteEdit({ id, name, data: JSON.stringify(data) }).then(() => {
    message.success('保存成功');
  });
};

const deleteSite = () => {
  if (!active.value) return;
  const formData = list.value.find(item => item.name === active.value);
  const { id } = formData!;
  Api.postSystemSiteDelete(id).then(() => {
    message.success('删除成功');
  });
};
</script>
<template>
  <div class="wh-full flex flex-col box-border pb-2">
    <TableController>
      <template #left>
        <ElSegmented v-model="active" :options="options" @change="changeFormModel" />
      </template>
    </TableController>

    <div
      class="overflow-y-auto w-full px-1 py-4 box-border mt-2"
      style="background-color: var(--el-bg-color)"
      v-loading="loading"
    >
      <div class="flex-1 ml-2 mt-4 max-w-1/2 px-2">
        <!-- 拖拽图标 -->
        <SchemaForm :formItems="formItemProps" :model="form" label-width="80px" label-position="left">
          <template #icp>
            <el-select v-model="form.icp">
              <AOptions :options="levelOptions" />
            </el-select>
          </template>
          <template #status>
            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
          </template>
        </SchemaForm>
      </div>
      <div class="flex flex-row justify-end ml-2 mt-6 max-w-1/2 p-2">
        <a-button type="primary" @click="submitEdit">Save</a-button>
        <a-button type="danger" @click="deleteSite">Delete</a-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
